<template>
  <div class ="container">
		
		
		<!-- 焦点轮播图 -->
		<div id="demo" class="carousel" data-ride="carousel">
			<!-- 图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img class="w-100" src="img/index/banner1.png" >
				</div>
				
				<div class="carousel-item">
					<img class="w-100" src="img/index/banner2.png" >
				</div>
				
				<div class="carousel-item">
					<img class="w-100" src="img/index/banner3.png" >
				</div>
				
				<div class="carousel-item">
					<img class="w-100" src="img/index/banner4.png" >
				</div>
			</div>
			
			<!-- 指示器 -->
			<ul class="carousel-indicators">
				<li class="active" data-slide-to="0" data-target="#demo"></li>
				<li data-slide-to="1" data-target="#demo"></li>
				<li data-slide-to="2" data-target="#demo"></li>
				<li data-slide-to="3" data-target="#demo"></li>
			</ul>
			
			<!-- 左右箭头 -->
			<a data-slide="next" href="#demo" class="carousel-control-next">
				<span class="carousel-control-next-icon"></span>
			</a>
			<a data-slide="prev" href="#demo" class="carousel-control-prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
		</div>
		
		
		<!-- 1L标题 -->
		<!-- 1L布局/首页推荐 -->
		<div class="border-bottom mt-3 pb-2">
			<img class="mw-100" src="img/index/computer_icon.png" >
			<span class="h4 text-muted">首页推荐 /1F</span>
		</div>
		
		<!-- 1L布局/图片 -->
		<div class="row no-gutters">
			<div class="col-lg-7 col-sm-12">
				<!-- 1.apple -->
				<div id="p1" class="my_height mr-lg-1 mb-1">
					
					<div class="card bg-transparent border-0 w-40 pt-5 pl-5">
						<h3 class="mb-0" v-text="p1.title"></h3>
						<h6 class="font-weight-normal text-small text-muted" v-text="p1.details"></h6>
						<span class="text-primary mb-3" v-text="`￥${p1.price.toFixed(2)}`"></span>
						<router-link class="btn btn-primary w-50" :to="`/details/${p1.href.split('=')[1]}`">查看详情</router-link>
					</div>
					
					<img class="float-right img-position1" :src="p1.pic" >
					
				</div>
			</div>
			
			<div class="col-lg-5 col-sm-12">
				<!-- 2.mi -->
				<div class="my_height mb-1">
					
					<div class="card bg-transparent border-0 w-40 pt-5 pl-5">
						<h3 class="mb-0" v-text="p2.title"></h3>
						<h6 class="font-weight-normal text-small text-muted" v-text="p2.details"></h6>
						<span class="text-primary mb-3" v-text="`￥${p2.price.toFixed(2)}`"></span>
						<router-link class="btn btn-primary w-75" :to="`/details/${p2.href.split('=')[1]}`">查看详情</router-link>
					</div>
					
					<img class="float-right img-position2" :src="p2.pic" >
					
				</div>
			</div>
			
			<div class="col-lg-5 col-sm-12">
				<!-- 3. -->
				<div class="my_bottom mr-lg-1 mb-sm-1 mb-lg-0">
					
					<div class="card bg-transparent border-0 w-40 pt-5 pl-5">
						<h5 class="mb-0" v-text="p3.title"></h5>
						<span class="text-primary mb-3" v-text="`￥${p3.price.toFixed(2)}`"></span>
						<router-link class="btn btn-primary w-75" :to="`/details/${p3.href.split('=')[1]}`">查看详情</router-link>
					</div>
					
					<img class="float-right img-position3" :src="p3.pic" >
					
				</div>
			</div>
			
			<div class="col-lg-7 col-sm-12">
				<div class="row no-gutters">
					<!-- others -->
					<div v-for="(p,i) of others" :key="i" class="col">
						<!-- 4. -->
						<div class="my_bottom mr-1">
							<div class="card border-0 bg-transparent align-items-center">
								<img class="img-position4" :src="p.pic" >
								<p class="text_small text-dark mb-1 text-center" v-text="p.title"></p>
								<p class="text-primary mb-1" v-text="`￥${p.price.toFixed(2)}`"></p>
								<router-link class="btn btn-primary btn-sm w-50" :to="`/details/${p.href.split('=')[1]}`">查看详情</router-link>
							</div>
						</div>
					</div>
					

				</div>
			</div>
		</div>
		
	</div>
</template>
<script>
export default {
	data() {
		return {
			p1:{price:0,href:""},
			p2:{price:0,href:""},
			p3:{price:0,href:""},
			others:[]
		}
	},
  mounted(){
		this.axios.get("/index").then(result=>{
			console.log(result.data);
			// this.p1=result.data[0];
			// this.p2=result.data[1];
			// this.p3=result.data[2];
			[this.p1,this.p2,this.p3]=result.data;
			this.others=result.data.slice(3);
		})
	}
}
</script>
<style scoped>
  
.carousel-indicators li{
	width: 0.7rem;height: 0.7rem;
	border-radius: 50%;
	background: #aaa;
	margin-left: 0.4rem;
	margin-right: 0.4rem;
}
.carousel-indicators li.active{
	background: #0aa1ed;
}
.carousel-control-prev,.carousel-control-next{
	width: 4%;height: 20%;
	top: 40%;
	background: #aaa;
	border-radius: 0.3rem;
}
.border-bottom{
	border-width: 3px !important;
}
.my_height{height: 377px;background: #e8e8e8;}
.my_bottom{height: 233px;background: #e8e8e8;}
.w-40{width: 40%;}
.img-position1{
	margin-right: 2rem;
	margin-top: -13rem;
	transition: 1s;
}
.img-position1:hover{
	transform: scale(1.1);
}
.img-position2{
	margin-right: 2rem;
	margin-top: -11rem;
	transition: 1s;
}
.img-position2:hover{
	transform: scale(1.1);
}
.img-position3{
	margin-right: 3rem;
	margin-top: -8rem;
	transition: 1s;
}
.img-position3:hover{
	transform: scale(1.1);
}
.img-position4{
	transition: 1s;
}
.img-position4:hover{
	transform: scale(1.1);
}
</style>